<template>
  <el-table ref="exTable"   :data="data"style="width: 100%" :border="true" :stripe="true" size="mini" >
    <el-table-column type="expand">
      <template slot-scope="props">
        <div >
          <div style="display: flex;justify-content: center;padding: 10px 5px;background: #29d;">
            <span style="flex: 1;color: white;font-size: 12px">配送信息</span>
            <a class="button iconfont icon-zengjia" @click="addGoods(props)"></a>
          </div>
          <UTable ref="mTable" :localData.sync="props.row.goodsList" :autoLoadData="false" :columns="goodsColumns" style="margin-top: 0px" />

        </div>

      </template>
    </el-table-column>
    <el-table-column  label="姓名" prop="name" align="center"/>
    <el-table-column  label="地址" prop="location" align="center"/>
    <el-table-column  label="联系电话" prop="phone" align="center"/>
    <el-table-column  label="紧急联系人" prop="urgentName" align="center"/>
    <el-table-column  label="紧急联系人电话" prop="urgentphone" align="center"/>
    <el-table-column  label="货品数量" prop="urgentphone" align="center">
      <template slot-scope="props">
        <el-tag type="success">{{props.row.goodsList.length}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column  label="到达时间" prop="arriveTime" align="center"/>


  </el-table>
</template>

<script>
import GoodsTable from  './GoodsTable'
import UTable from '@/components/UTable'
export default {
  components:{
    UTable
  },
  props:['data'],
  data(){
    return {
      goodsColumns:[
        { type:'edit',inputType:'text', prop: 'goodsName', label: '品名' },
        { type:'edit', inputType:'number',prop: 'qty', label: '数量'},
        { type:'edit',inputType:'text', prop: 'unitname', label: '单位'}
      ]
    }
  },
  methods:{
    addGoods(props){
      this.$emit('addGoods', props.$index)
      this.$ref.exTable.toggleRowExpansion(props.$index,true)
    }
  }
}
</script>

<style scoped>

</style>
